<template>
  <div ref="trendPie" :style="{ width: width, height: height }"></div>
</template>
<script>
export default {
  name: 'TrendsPie',
  data() {
    return {
      PieData:[]
    }
  },
  props: {
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: '全园'
    },
    data: {
      type: Array,
      default:()=>{
      }
    },
    text:{
      type: String,
      default: '睡眠质量'
    },
  },
  watch:{
    data:{
      handler(val){
        this.PieData = val;
        this.getEchart();
      },
      deep:true
    },
  },
  mounted() {
  },

  methods: {
    getEchart(val) {
      var myChart = this.$echarts.init(this.$refs.trendPie)
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      let option = {
        title: {
          text: this.className+this.text,
          top: 'center',
          left: "49%",
          textAlign: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter: '{b0}: {c0}人<br />占比：({d}%)'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['34%', '46%'],
            clockwise: true,
            avoidLabelOverlap: true,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              scale: true,
              scaleSize: 15
            },
            label: {
              show: true,
              color: 'inherit',
              position: 'outside',
              formatter: '{a|{b}：{d}%}\n{hr|}',
              rich: {
                a: {
                  padding: [-30, 2, -20, 2]
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 5,
                lineStyle: {
                  width: 1
                }
              }
            },
            data:this.PieData
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      // 自动循环突出放大功能
      // var currentIndex = 0
      // // 计时器
      // timeSetIntervalFun()
      // let timeSetInterval = null;
      // function timeSetIntervalFun() {
      //   timeSetInterval = setInterval(function() {
      //     var dataLen = option.series[0].data.length
      //     // 取消之前高亮的图形
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       seriesIndex: 0,
      //       dataIndex: currentIndex
      //     })
      //     currentIndex = (currentIndex + 1) % dataLen
      //     // 高亮当前图形
      //     myChart.dispatchAction({
      //       type: 'highlight',
      //       seriesIndex: 0,
      //       dataIndex: currentIndex
      //     })
      //   }, 2000)
      // }

      // myChart.on('mouseover', function(e) {
      //   clearInterval(timeSetInterval)
      //   //当检测到鼠标悬停事件，取消默认选中高亮
      //   myChart.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      //   //高亮显示悬停的那块
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 1,
      //     dataIndex: e.dataIndex
      //   })
      //   currentIndex = e.dataIndex
      // })

      // //检测鼠标移出后显示之前默认高亮的那块
      // myChart.on('mouseout', function(e) {
      //   timeSetIntervalFun()
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 1,
      //     dataIndex: 0
      //   })
      // })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
